<template>
	<div class="detail-footer">
		<p class="footer-t-p">
			<span class="footer-t-span">—— </span>
			打赏小礼，给TA点赞
			<span class="footer-t-span"> ——</span>
		</p>
		<div class="footer-c" @click="topUp()">
			<div class="f-c-l">
				<div class="footer-meun-topbox">
					<span class="iconfont footer-diamond">
						&#xe605;
					</span>
				</div>
				<div class="footer-menu-bottombox">
					冲榜
				</div>
			</div>
			<div class="f-c-c">
				<div class="footer-meun-topbox">
					<p class="menubox-p">
						赏
					</p>
				</div>
				<div class="footer-menu-bottombox">
					更多
				</div>
			</div>
			<div class="f-c-r">
				<div class="footer-meun-topbox">
					<p class="menubox-p">赞</p>
				</div>
				<div class="footer-menu-bottombox">
					{{detailComm}}赞
				</div>
			</div>
		</div>
		<p class="integral-p">
			作者获得
			<span class="integral-span">
				{{detailComm}}
			</span>
			积分
		</p>
	</div>
</template>

<script>
	export default {
		name: 'detail-footer',
		props: {
			detailComm: Number
		},
		methods: {
			topUp () {
				this.$emit('topUpChange')
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~stylus/minxins.styl'
	.footer-meun-topbox
		width:98px
		height:98px
		background:#fff
		display: flex
		flex-direction: row
		align-items: center
		justify-content: center
		margin:0 auto
		border-radius:50%
		border:1px #DCDBDC solid
	.footer-menu-bottombox
		height:50px
		color:#999
		line-height:50px
	.menubox-p
		font-size:44px
		color:#F6934D
	.detail-footer
		height:320px
		padding-top:40px
		text-align:center
		background:#fff
		.footer-t-p
			color:#F6934D
			font-size:26px
		.footer-t-span
			color:#DCDBDC
		.footer-c
			width:483px
			margin:30px auto
			flexRow()
			.f-c-l
				width:161px
				.footer-diamond
					margin-top:14px
					font-size:52px
					color:#15A5F8
			.f-c-c
				width:161px	
			.f-c-r
				width:161px
		.integral-p
			color:#999
			.integral-span
				color:#F6934D
</style>
